<template>
  <div class="ExportButton" style="display:inline;margin-left:10px">
    <!-- 数据导出组件 -->
    <el-dialog
      title="导出"
      :visible.sync="dialogVisible"
      :show-close="false"
      :before-close="closeDailog"
    >
      <FormContainer :column="1">
        <el-form ref="formData" :model="formData" :rules="formRules" label-width="80px">
          <el-form-item prop="type" label="导出类型">
            <el-radio-group v-model="formData.type">
              <el-radio label="1">导出数据</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item prop="range" label="导出范围">
            <el-radio-group v-model="formData.range">
              <el-radio label="1" :disabled="disabled">选中的数据行</el-radio>
              <el-radio label="2">符合当前查询条件的全部数据行</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item prop="fileName" label="文件名">
            <el-input v-model="formData.fileName" placeholder="请输入文件名" clearable />
          </el-form-item>
        </el-form>
      </FormContainer>
      <span slot="footer" class="dialog-footer">
        <Button @click="closeDailog">取消</Button>
        <Button type="primary" @click="confrim">确定</Button>
      </span>
    </el-dialog>
    <Button type="primary" :loading="loading" @click="openDailog">导出</Button>
  </div>
</template>
<script>
import FormContainer from '@/components/FormContainer'
import Button from '@/components/Button'
export default {
  name: 'ExportButton',
  components: {
    FormContainer,
    Button
  },
  props: {
    openUp: {
      type: Boolean,
      default: false
    },
    fileName: {
      type: String,
      default: ''
    },
    selected: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      dialogVisible: false,
      loading: false,
      formData: {
        type: '1',
        range: '1',
        fileName: ''
      },
      formRules: {
        fileName: { required: true, message: '请输入文件名', trigger: 'blur' }
      }
    }
  },
  computed: {
    disabled() {
      return !(this.selected instanceof Array) || this.selected.length <= 0
    }
  },
  watch: {
    fileName: {
      handler(v) {
        if (v !== undefined && v !== null) {
          this.$set(this.formData, 'fileName', v)
        }
      },
      immediate: true
    },
    selected: {
      handler(v) {
        if (v instanceof Array && v.length > 0) {
          this.$set(this.formData, 'range', '1')
        } else {
          this.$set(this.formData, 'range', '2')
        }
      },
      immediate: true
    }
  },
  methods: {
    openDailog() {
      if (!this.openUp) {
        return this.$message.warning('导出功能暂未开放')
      }
      this.dialogVisible = true
    },
    changeLoading(bol) {
      this.loading = bol
    },
    closeDailog() {
      this.$refs.formData.resetFields()
      this.dialogVisible = false
    },
    // 确定
    confrim() {
      this.$refs.formData.validate(valid => {
        if (valid) {
          this.$emit('exportFunc', JSON.parse(JSON.stringify(this.formData)))
          this.closeDailog()
        }
      })
    }
  }
}
</script>
<style lang='scss' scoped>
</style>
